import { withRouter } from "react-router";
import { Component } from "refast";
import logic from "./logic";
import "./PageYcjk.less";
import Grid from "uxcore-grid";
import { Row, Col } from "uxcore-grid";
import Table from "uxcore-table";
import ReactEcharts from "echarts-for-react";
import Layout from "uxcore-layout";
const { Left, Right } = Layout;
import Dialog from "uxcore-dialog";
import ycEngIcon from "./icon/yc-eng.png";
import ycEqIcon from "./icon/yc-eq.png";
import ycAlertIcon from "./icon/yc-alert.png";
import moment from "moment";

class PageYcjk extends Component {
  constructor(props) {
    super(props, logic);

    this.state = {
      ...this.state,
      alertEngId: "",
      showAlertDetails: false,
    };

    this.hideAlertDetails = this.hideAlertDetails.bind(this);
  }

  componentDidMount() {
    this.dispatch("queryWeatherInfo");
    // this.dispatch('engCount');
    // this.dispatch('equipmentCount');
    // this.dispatch('yellowAlertCount');
    // this.dispatch('redAlertCount');
    this.dispatch("topAlertCount");
    this.dispatch("alertHistoryLastDay", { day: 10 });
    this.dispatch("alertCountRank");
    this.dispatch("allEquipmentInfo", this.state.equipmentAllInfo.search);
  }

  onPagerChange(page, size) {
    const { ename } = this.state.equipmentAllInfo.search;
    this.dispatch("allEquipmentInfo", { page: page, size: size, ename: ename });
  }

  onSearch(searchText) {
    const { page, size } = this.state.equipmentAllInfo.search;
    this.dispatch("allEquipmentInfo", {
      page: 1,
      size: 10,
      ename: searchText,
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (
      Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length
    ) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  onWindowResize() {
    this.setState({
      wHeight: window.innerHeight,
      aHeight: window.innerHeight - this.state.mHeight * 3 + 130,
    });
  }

  handleAlertEngClick(rowData) {
    let n = JSON.stringify(rowData);
    this.setState({ alertEngId: "" });
    this.setState({ showAlertDetails: true });
    this.dispatch("todayWorkInfoByEcode", {
      ecode: rowData.ecode,
      sendtime: rowData.alertdate,
    });
  }

  hideAlertDetails() {
    this.setState({ showAlertDetails: false });
  }

  render() {
    let t = this;

    const alertColumns = [
      {
        dataKey: "ename",
        title: "设备名称",
        width: "40%",
        render: function (cellData, rowData) {
          return (
            <div
              onClick={() => {
                // t.handleAlertEngClick(rowData);
              }}
            >
              <span>{rowData.ename + ""}</span>
            </div>
          );
        },
      },
      { dataKey: "yellow", title: "黄色预警", width: "20%" },
      { dataKey: "red", title: "红色预警", width: "20%" },
      { dataKey: "handlestatus", title: "累计处理", width: "20%" },
    ];

    let data = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
    let time = moment(data).format("YYYY-MM-DD");

    const alertDetailsColumns = [
      {
        dataKey: "ename",
        title: "预警时间",
        width: "20%",
        render: function (cellData, rowData) {
          return (
            <div>
              <span>{time + ""}</span>
            </div>
          );
        },
      },
      //{ dataKey: 'ename', title: '工程简介', width: '20%' },
      { dataKey: "ecode", title: "设备编码", width: "20%" },
      { dataKey: "pmten", title: "PM10", width: "20%" },
      { dataKey: "pmtwo", title: "PM2.5", width: "20%" },
      //{ dataKey: 'num', title: '预警次数', width: '15%' },
    ];

    return (
      <div className="page-ycjk">
        <Grid fluid={true}>
          <Row className="page-ycjk-show-grid">
            <Col xs={24} md={6}>
              <div className="page-ycjk-head-statics-eng">
                <div className="yc-layout-left">
                  <img src={ycEngIcon} />
                </div>
                <div className="yc-layout-right">
                  <p className="yc-layout-right-title">工地总数</p>
                  <p className="yc-layout-right-value">{this.state.engCount}</p>
                </div>
              </div>
            </Col>
            <Col xs={24} md={6}>
              <div className="page-ycjk-head-statics-eq">
                <div className="yc-layout-left">
                  <img src={ycEqIcon} />
                </div>
                <div className="yc-layout-right">
                  <p className="yc-layout-right-title">设备总数</p>
                  <p className="yc-layout-right-value">
                    {this.state.equipmentCount}
                  </p>
                </div>
              </div>
            </Col>
            <Col xs={24} md={6}>
              <div className="page-ycjk-head-statics-ya">
                <div className="yc-layout-left">
                  <img src={ycAlertIcon} />
                </div>
                <div className="yc-layout-right">
                  <p className="yc-layout-right-title">黄色预警</p>
                  <p className="yc-layout-right-value">
                    {this.state.yellowAlertCount}
                    <span className="yc-layout-right-value-unit">次</span>
                  </p>
                </div>
              </div>
            </Col>
            <Col xs={24} md={6}>
              <div className="page-ycjk-head-statics-ra">
                <div className="yc-layout-left">
                  <img src={ycAlertIcon} />
                </div>
                <div className="yc-layout-right">
                  <p className="yc-layout-right-title">红色预警</p>
                  <p className="yc-layout-right-value">
                    {this.state.redAlertCount}
                    <span className="yc-layout-right-value-unit">次</span>
                  </p>
                </div>
              </div>
            </Col>
          </Row>
          <Row className="page-ycjk-show-grid">
            <Col xs={24} md={24}>
              <div className="page-ycjk-middle-alert">
                <Layout>
                  <Left width={490} className="page-ycjk-middle-alert-left">
                    <ReactEcharts
                      style={{ height: "240px" }}
                      option={this.state.alertHistoryLastDay}
                    />
                  </Left>
                  <Right width={450}>
                    <Table
                      size="small"
                      showPager={false}
                      height={240}
                      ref="ycAlertRate"
                      className="kuma-uxtable-split-line"
                      showColumnPicker={false}
                      jsxcolumns={alertColumns}
                      jsxdata={this.state.alertCountRank.jsxdata}
                    />
                  </Right>
                </Layout>
              </div>
            </Col>
          </Row>
          <Row className="page-ycjk-show-grid">
            <Col xs={24} md={24}>
              <div className="page-ycjk-middle-data">
                <Table
                  size="small"
                  showSearch
                  searchBarPlaceholder="按设备名称搜索"
                  height={310}
                  ref="ycAlertRate"
                  className="kuma-uxtable-split-line"
                  showColumnPicker={false}
                  onPagerChange={(page, size) => {
                    this.onPagerChange(page, size);
                  }}
                  onSearch={(searchTxt) => {
                    this.onSearch(searchTxt);
                  }}
                  jsxcolumns={this.state.equipmentAllInfo.jsxcolumns}
                  jsxdata={this.state.equipmentAllInfo.jsxdata}
                />
              </div>
            </Col>
          </Row>
        </Grid>
        <Dialog
          title={`扬尘报警详细信息`}
          width={600}
          onCancel={this.hideAlertDetails}
          onOk={this.hideAlertDetails}
          visible={this.state.showAlertDetails}
          transitionName="slideDown"
        >
          <Table
            size="small"
            height={250}
            ref="ycAlertRate"
            className="kuma-uxtable-split-line"
            showColumnPicker={false}
            jsxcolumns={alertDetailsColumns}
            jsxdata={this.state.alertDetails}
          />
        </Dialog>
      </div>
    );
  }
}

export default withRouter(PageYcjk);
